<template>
    <div>
        <h1>四年级上册</h1>
        <h2>第一单元</h2>
        <el-row>
            <div>
                <img src="static/char/putao.jpg"/>
            </div>
            <div>
                鹿柴的古诗大意
            </div>
            <pre>
                响声直达高空，形容声音十分嘹亮。（     ）
                私下里小声交谈。（      ）
                形容非常安静。（     ）
            </pre>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                葡萄<br/>
                <img src="static/char/luzhai.jpg"/>
                <img src="static/char/xiangcheyunxiao.jpg"/>
            </div>
        </el-row>

        <hr/>
        <h2>第二单元</h2>
        <el-row>
            <img src="static/char/jishi.jpg"/>
            <img src="static/char/leida.jpg"/>
            <img src="static/char/jiashiyuan.jpg"/>
            <img src="static/char/zhexuerenhe.jpg"/>
            <img src="static/char/shiji.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                即使  雷达 驾驶员 哲学 任何 世纪
            </div>
        </el-row>
        <hr/>
        <h2>第三单元</h2>
        <el-row>
            <img src="static/char/chongdie.jpg"/>
            <img src="static/char/laogu.jpg"/>
            <img src="static/char/xiuxiang.jpg"/>
            <img src="static/char/shenzhong.jpg"/>
            <img src="static/char/youliang.jpg"/>
            <img src="static/char/dating.jpg"/>
            <img src="static/char/woshi.jpg"/>
            <img src="static/char/mujiangyin.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                重叠 牢固  休想 慎重  优良  大厅  卧室 九月初三夜  卢钺
            </div>
        </el-row>

        <h2>第四单元</h2>
        <el-row>
            <img src="static/char/zirun.jpg"/>
            <img src="static/char/jianlihenxin.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                滋润 尖利 狠心
            </div>
        </el-row>

        <h2>第五单元</h2>
        <el-row>
            <img src="static/char/guwu.jpg"/>
            <img src="static/char/xiuhua.jpg"/>
            <img src="static/char/zhuming.jpg"/>
            <img src="static/char/jingweitianhai.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                鼓舞 绣花 著名x
            </div>
        </el-row>

        <h2>第六单元</h2>
        <el-row>
            <img src="static/char/chehuan.jpg"/>
            <img src="static/char/shouwuzudao.jpg"/>
            <img src="static/char/chazhihaoli.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                撤换 手舞足蹈 差之毫厘，谬以千里。病从口入，祸从口出。
            </div>
        </el-row>
        <h2>第七单元</h2>
        <el-row>
            <img src="static/char/feifan.jpg"/>
            <img src="static/char/zuoguyoupan.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                非凡 左顾右盼
            </div>
        </el-row>
        <h2>第八单元</h2>
        <el-row>
            <img src="static/char/xifu.jpg"/>
            <img src="static/char/guangai.jpg"/>
            <img src="static/char/waimiaochengyu.jpg"/>
            <img src="static/char/pingdegaoshang.jpg"/>
            <img src="static/char/gushi08.jpg"/>
        </el-row>
        <el-row v-show="showAnswer">
            <div class="my-font">
                媳妇 灌溉 明眸皓齿 文质彬彬 相貌堂堂 鹤发童颜 老态龙钟 志存高远 秦 教  夜  卧 君  亦 项羽 雁
            </div>
        </el-row>

        <el-row style="margin-top:20px;" >
            <el-button v-show="!showAnswer"  type="primary" @click="() => {showAnswer = true}">查看答案</el-button>
            <el-button v-show="showAnswer"  type="primary" @click="() => {showAnswer = false}">隐藏答案</el-button>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "char",
        data() {
            return {
                showAnswer: false,
            }
        }
    }
</script>

<style scoped>
    .my-font{
        font-size: 60px;
        border: 2px dashed #dcdee2;
        padding:10px;
    }
</style>
